/*------------------------------------
  用户电子书
------------------------------------*/
.book-list{
  li{
    padding:10px 15px;
    padding-right:0;
  }
  .book{
    position: relative;
    border:1px solid #dedede;
    overflow: hidden;
    &:hover{
      .details {
        display: block;
      }
      .cover{
        img{
          transform: scale(1.05);
        }
      }
    }
    .cover{
      img{
        width: 135px;
        height:180px;
        transition: transform 250ms ease;
      }
    }
    .details{
      a{
        color: #fff !important;
        text-decoration: none;
      }
      position:absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.3);
      display:none;
      z-index: 2;
      color: #fff;
      .title{
        margin-top:45%;
      }
      .edit{
        position:absolute;
        top:0;
        right:5px;
      }
    }
  }

  .add-book{
    height:180px;
    width:120px;
    display: inline-block;
    vertical-align: bottom;
    padding-top:35%;
    text-align: center;
    img{
      width: 135px;
      height:180px;
      transition: transform 250ms ease;
      border:1px solid #dedede;
    }
    a{
      text-decoration: none;
      color:$metaColor;
    }
    .if{
      font-size:38px;
    }
  }
}

/*------------------------------------
  电子书详情
------------------------------------*/
.book-detail{
  .category{
    .avatar{
      width:100px;
      height:136px;
    }
  }
  .book-box{
    padding:10px 15px;
  }

  .book-summary{
    .chapter{
      padding: 10px 20px;
      //border:1px solid $metaColor;
      a{
        text-decoration: none;
      }
      .fa{
        color: $metaColor;
        margin-right:5px;
        &.fa-caret-down{
          font-size:18px;
        }
      }
      .action{
        padding-left: 15px;
        display:none;
        .fa{
          font-size:14px;
        }
      }
      &:hover{
        .action{
          display: inline-block;
        }
        background-color:rgba(0,0,0, 0.1)
      }

      .sub-chapter{
        margin-top:10px;
        li{
          padding:5px 25px;
          .fa{
            font-size:12px;
          }
          .action{
            .fa{
              font-size:14px;
            }
          }
        }
      }
    }
  }
}
/*------------------------------------
  电子书阅读详情
------------------------------------*/
.book-view{
  position: relative;
  width: 100%;
  height: 100%;

  &.with-summary{
    .book-summary{
      left:0;
    }
    .book-body{
      @media (min-width: 600px) {
        left:300px;
      }
      @media (max-width: 600px) {
        -webkit-transform: translate(calc(100% - 60px),0);
        -moz-transform: translate(calc(100% - 60px),0);
        -ms-transform: translate(calc(100% - 60px),0);
        -o-transform: translate(calc(100% - 60px),0);
        transform: translate(calc(100% - 60px),0);
      }
    }
  }

  .book-summary {
    position: absolute;
    top: 0;
    left: -300px;
    bottom: 0;
    z-index: 1;
    overflow-y: auto;
    width: 300px;
    color: #364149;
    background: #fafafa;
    border-right: 1px solid rgba(0,0,0,.07);
    -webkit-transition: left 250ms ease;
    -moz-transition: left 250ms ease;
    -o-transition: left 250ms ease;
    transition: left 250ms ease;

    @media (max-width:600px) {
      width: calc(100% - 60px);
      bottom: 0;
      left: -100%;
    }

    .book-name{
      font-weight: 600;
      line-height: 50px;
      height: 50px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      margin-bottom:10px;
      a{
        text-decoration: none;
      }
    }

    ul.summary{
      list-style: none;
      margin: 0;
      padding: 0;
      -webkit-transition: top .5s ease;
      -moz-transition: top .5s ease;
      -o-transition: top .5s ease;
      transition: top .5s ease;
      a{
        color:#666;
        text-decoration: none;
      }
      .fa{
        color: $metaColor;
        &.fa-caret-down{
          font-size:20px;
        }
      }
      li{
        &.divider{
          height: 1px;
          margin: 7px 0;
          overflow: hidden;
          background: rgba(0,0,0,.07);
        }
        span.name{
          display: block;
          padding: 5px 15px;
          border-bottom: none;
          //color: #364149;
          color:#666;
          background: 0 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          position: relative;
          text-decoration: none;

          i.fa{
            margin-right:5px;
          }
        }

        &.active{
            color: #333;
            background: #e5e5e5;
        }
        .sub-chapter{
          li{
            padding:2px 10px 2px 45px;
          }
        }
      }
    }
  }

  //Book Body
  .book-body {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    color: #000;
    background: #fff;
    -webkit-transition: left 250ms ease;
    -moz-transition: left 250ms ease;
    -o-transition: left 250ms ease;
    transition: left 250ms ease;

    @media(max-width: 600px){
      transition: transform 250ms ease;
      padding-bottom: 20px;
    }
    //Book Inner
    .body-inner {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      overflow-y: auto;
      //Book Header
      .book-header {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        overflow: visible;
        height: 50px;
        padding: 0 8px;
        z-index: 2;
        font-size: .85em;
        color: #7e888b;
        background: 0 0;
        border-bottom: 2px solid $contrastColor;
        .btn, .social-share-button {
          display: block;
          height: 50px;
          padding: 0 15px;
          border-bottom: none;
          color: #ccc;
          text-transform: uppercase;
          line-height: 50px;
          -webkit-box-shadow: none!important;
          box-shadow: none!important;
          position: relative;
          font-size: 14px;

          &:hover{
            position: relative;
            text-decoration: none;
            color: #444;
            background: 0 0;
          }
        }

        .social-share-button{
          .social-share-icon{
            border:none;
            color: #ccc;
            font-size:14px;
            &:hover{
              color: #444;
              background: none;
            }
          }
        }

        h1 {
          margin: 0;
          font-size: 20px;
          font-weight: 200;
          text-align: center;
          line-height: 50px;
          opacity: 1;
          -webkit-transition: opacity ease .4s;
          -moz-transition: opacity ease .4s;
          -o-transition: opacity ease .4s;
          transition: opacity ease .4s;
          padding-left: 200px;
          padding-right: 200px;
          -webkit-transition: opacity .2s ease;
          -moz-transition: opacity .2s ease;
          -o-transition: opacity .2s ease;
          transition: opacity .2s ease;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          i{
            display: none;
          }

          a, a:hover{
            color: inherit;
            text-decoration: none;
          }

          @media screen and (max-width: 1000px){
            display: none;
          }
        }

        &:hover{
          h1{
            opacity: 1;
          }
        }
      }

      .page-wrapper {
        position: relative;
        outline: 0;
        .page-inner {
          position: relative;
          left: 0;
          transition: 300ms ease left;
          max-width: 800px;
          margin: 0 auto;
          padding: 20px 15px 40px 15px;
          .markdown-body{
            font-size:16px;
            line-height: 1.7em;
            color: #2f2f2f;
          }
          section{
            display: block;
            word-wrap: break-word;
          }
        }
      }

      @media screen and (max-width: 1240px){
        position: static;
        min-height: calc(100% - 50px);
      }
    }

    //左右导航切换
    .navigation-unique{
      @media (max-width: 1240px) {
        max-width: 100%;
        width: 100%;
      }
    }
    .navigation {
      position: absolute;
      top: 50px;
      bottom: 0;
      margin: 0;
      max-width: 150px;
      min-width: 90px;
      //display: flex;
      display: none !important;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      font-size: 40px;
      color: #ccc;
      text-align: center;
      -webkit-transition: all 350ms ease;
      -moz-transition: all 350ms ease;
      -o-transition: all 350ms ease;
      transition: all 350ms ease;
      &:hover{
        text-decoration: none;
        color: #444;
      }
      @media screen and (max-width: 1240px) {
        position: static;
        top: auto;
        max-width: 50%;
        width: 50%;
        display: inline-block;
        float: left;
      }
      &.navigation-next {
        right: 0;
      }
      &.navigation-prev {
        left: 0;
      }
    }
  }

}

#book-search-input {
  padding: 6px;
  background: 0 0;
  transition: top .5s ease;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  border-top: 1px solid rgba(0,0,0,.07);
  margin-bottom: 10px;
  margin-top: -1px;

  input,input:focus, input:active{
    width: 100%;
    background: 0 0;
    border: 1px solid transparent;
    box-shadow: none;
    outline: 0;
    line-height: 22px;
    padding: 7px 7px;
    color: inherit;
  }
}